import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Button, Popconfirm, Collapse, Row, Col, Icon, Table, Modal} from 'antd';
import {TABLE, FIXED_COLUMN_WIDTH} from '../constants';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import TextInput from 'Shared/components/TextInput';
import styles from './style.css';
import PartSelectPanel from './PartSelectPanel';
import VehicleSelectPanel from './VehicleSelectPanel';
import ImportPanel from './ImportPanel';
const EMPTY_ARRAY = [];
const Panel = Collapse.Panel;
export class AddVehicle extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        showVehicle: false,
        showPart: false,
        showImportPanel: false
    };

    showVehicle = () => {
        this.setState({
            showVehicle: !this.state.showVehicle
        });
    };

    showPart = () => {
        this.setState({
            showPart: !this.state.showPart
        });
    };

    onClickAddVehicle = e => {
        e.stopPropagation();
        this.setState({
            showVehicle: true
        });
    }

    onClickDelete = e => {
        e.stopPropagation();
        this.props.onClickDelete(e.currentTarget.dataset.id);
    }

    onClickDeletePart = e => {
        const partId = e.currentTarget.dataset.id;
        this.props.onClickDeletePart(partId);
    }

    onClickDeleteAll = e => {
        e.stopPropagation();
        this.props.onClickDeleteAll();
    }

    onClickHtmlA = e => {
        e.stopPropagation();
    }

    onBlurRemark = (value, id) => {
        this.props.updatePartDetail({
            remark: value,
            id
        });
    };
    onSelectParts = data => {
        if(data.length)
            this.props.onSelectParts(data);
        this.setState({
            showPart: false
        });
    }

    onSelectVehicles = data => {
        if(data.length)
            this.props.onSelectVehicles(data, this.state.detailId);
        this.setState({
            showVehicle: false
        });
    }
    
    onClickImportBtn = e => {
        e.stopPropagation();
        this.setState({showImportPanel: true});
    }
    onCloseImportPanel = () => {
        this.setState({showImportPanel: false});
    }
    onImportChange = data => {
        if(data.payload.content.length)
            this.props.onSelectVehicles(data.payload.content, this.state.detailId);
        this.setState({
            showImportPanel: false
        });
    }
    render() {
        const {vehicleItems = EMPTY_ARRAY} = this.props.data;
        const currentSelectVehicleRowKeys = vehicleItems.map(item => item.vehicleId);
        const {parts = []} = vehicleItems.find(item => item.vehicleId === this.props.itemId) || {};
        const currentSelectPartRowKeys = parts.map(item => item.id);

        const materialColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'addVehicle.colums.code',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'code',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'addVehicle.colums.partName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'name',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'addVehicle.column.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark',
                render: (text, record) => <TextInput id={record.id}
                    value={record.remark} onBlur={this.onBlurRemark} />
            },
            {
                title: parts.length ? (
                    <WrappedPopconfirm
                        id="delete"
                        title={this.props.intl.formatMessage({
                            id: 'addVehicle.popconfirm.message',
                            defaultMessage: '是否继续?'
                        })}
                        okText={this.props.intl.formatMessage({
                            id: 'addVehicle.popconfirm.confirm',
                            defaultMessage: '确认'
                        })}
                        cancelText={this.props.intl.formatMessage({
                            id: 'addVehicle.popconfirm.cancel',
                            defaultMessage: '取消'
                        })}
                        onConfirm={this.props.onDeleteAllPart}>
                        <a>
                            {this.props.intl.formatMessage({
                                id: 'addVehicle.deleteAll',
                                defaultMessage: '清空'
                            })}
                        </a>
                    </WrappedPopconfirm>
                ) : (
                    <a>
                        {this.props.intl.formatMessage({
                            id: 'addVehicle.deleteAll',
                            defaultMessage: '清空'
                        })}
                    </a>
                ),
                dataIndex: 'action',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record) => (
                    <a onClick={this.onClickDeletePart} data-id={record.id}>
                        {this.props.intl.formatMessage({
                            id: 'addVehicle.delete',
                            defaultMessage: '删除'
                        })}
                    </a>
                )
            }
        ];
        const vehiclePanel = vehicleItems.map(p => {
            const header = (
                <Row>
                    <Col span={22} className={styles.edit}>
                        <strong>{p.vin}</strong>
                    </Col>
                    <Col span={2} className={`col-align-right ${styles.collapseBtn}`}>
                        {<a data-id={p.vehicleId} onClick={this.onClickDelete}>{this.props.intl.formatMessage({
                            id: 'addVehicle.vehicleItems.deleteBtn',
                            defaultMessage: '删除'
                        })}</a>}
                    </Col>
                </Row>
            );
            const dataSource = p.parts || EMPTY_ARRAY;
            const isCurrentPanel = this.props.itemId === p.vehicleId;
            return (
                <Panel key={p.vehicleId} header={header}>
                    {isCurrentPanel ? [<Button className={styles.add} key="addBtn" type="dashed" data-id={p.vehicleId} onClick={this.showPart}>
                        <Icon type="plus" />{this.props.intl.formatMessage({
                            id: 'addVehicle.vehicleItems.addBtn',
                            defaultMessage: '新增备件'
                        })}
                    </Button>,
                    <Table key="table"
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={materialColumns}
                        pagination={false}
                        dataSource={dataSource}
                        {...TABLE} />] : ''}
                </Panel>
            );
        });
        const clearAllBtn = vehicleItems.length ? (<Popconfirm
            placement="topLeft"
            key="deleteAll"
            onConfirm={this.onClickDeleteAll}
            onCancel={this.onClickHtmlA}
            title={this.props.intl.formatMessage({
                id: 'addVehicle.popconfirm.delete.message',
                defaultMessage: '是否确认清空?'
            })}
            okText={this.props.intl.formatMessage({
                id: 'addVehicle.popconfirm.confirm',
                defaultMessage: '确认'
            })}
            cancelText={this.props.intl.formatMessage({
                id: 'addVehicle.popconfirm.cancel',
                defaultMessage: '取消'
            })}>
            <a onClick={this.onClickHtmlA}>{this.props.intl.formatMessage({
                id: 'addVehicle.deleteAll',
                defaultMessage: '清空'
            })}</a>
        </Popconfirm>)
            : (<a onClick={this.onClickHtmlA} key="deleteAll">{this.props.intl.formatMessage({
                id: 'addVehicle.deleteAll',
                defaultMessage: '清空'
            })}</a>);
        return (
            <React.Fragment>
                <Modal
                    title={this.props.intl.formatMessage({
                        id: 'addVehicle.vehicleItems.modal.title',
                        defaultMessage: '车辆查询'
                    })}
                    width="80%"
                    maskClosable={false}
                    footer={null}
                    wrapClassName={styles.dataSelectModal}
                    destroyOnClose={true}
                    visible={this.state.showVehicle}
                    onCancel={this.showVehicle}>
                    <VehicleSelectPanel onSelect={this.onSelectVehicles} currentSelectRowKeys={currentSelectVehicleRowKeys} />
                </Modal>
                <Modal
                    title={this.props.intl.formatMessage({
                        id: 'addVehicle.parts.modal.title',
                        defaultMessage: '索赔备件信息'
                    })}
                    width="60%"
                    maskClosable={false}
                    footer={null}
                    wrapClassName={styles.dataSelectModal}
                    destroyOnClose={true}
                    visible={this.state.showPart}
                    onCancel={this.showPart}>
                    <PartSelectPanel vehicleId={this.props.itemId} onSelect={this.onSelectParts} currentSelectRowKeys={currentSelectPartRowKeys} />
                </Modal>
                {
                    this.state.showImportPanel &&
                    <ImportPanel
                        selectKey={'1'}
                        onCancel={this.onCloseImportPanel}
                        onImportChange={this.onImportChange} />
                }
                <Collapse activeKey={this.props.detailCollapse} onChange={this.props.onChangeDetailCollapse}>
                    <Panel header={<Row>
                        <Col span={20} className={styles.edit}>
                            {this.props.intl.formatMessage({
                                id: 'addVehicle.vehicleItems.title',
                                defaultMessage: '车辆清单'
                            })}
                        </Col>
                        <Col span={4} className={`col-align-right ${styles.collapseBtn}`}>
                            {[
                                <a size="small"
                                    onClick={this.onClickImportBtn}
                                    key="import">{this.props.intl.formatMessage({
                                        id: 'addVehicle.vehicleItems.import',
                                        defaultMessage: '导入'
                                    })}</a>,
                                <a size="small"
                                    onClick={this.onClickAddVehicle}
                                    key="add">{this.props.intl.formatMessage({
                                        id: 'addVehicle.vehicleItems.addDetail',
                                        defaultMessage: '新增'
                                    })}</a>,
                                clearAllBtn]}
                        </Col>
                    </Row>} key="1">
                        <Collapse accordion activeKey={this.props.itemId} onChange={this.props.onChangeCollapse}>
                            {vehiclePanel}
                        </Collapse>
                    </Panel>
                </Collapse>
            </React.Fragment>
        );
    }
}

AddVehicle.propTypes = {
    data: PropTypes.object.isRequired,
    updatePartDetail: PropTypes.func.isRequired,
    onChangeCollapse: PropTypes.func.isRequired,
    onChangeDetailCollapse: PropTypes.func.isRequired,
    onClickDelete: PropTypes.func.isRequired,
    onClickDeleteAll: PropTypes.func.isRequired,
    onClickDeletePart: PropTypes.func.isRequired,
    onDeleteAllPart: PropTypes.func.isRequired,
    onSelectParts: PropTypes.func.isRequired,
    onSelectVehicles: PropTypes.func.isRequired,
    detailCollapse: PropTypes.array,
    intl: PropTypes.object,
    itemId: PropTypes.string,
};

import {connect} from 'react-redux';
import {
    deleteVehicleDetail,
    deleteAllVehicleDetail,
    deletePartDetail,
    deleteAllPartDetail,
    updatePartDetail,
    onSelectParts,
    onSelectVehicleToDetails,
} from './actions';
const mapDispatchToProps = (dispatch, ownProps) => {
    const detailId = ownProps.data.id || '';
    const vehicleId = ownProps.itemId;
    return {
        onClickDelete: id => dispatch(deleteVehicleDetail(id, detailId)),
        onClickDeletePart: pid => dispatch(deletePartDetail(pid, vehicleId, detailId)),
        onClickDeleteAll: () => dispatch(deleteAllVehicleDetail(detailId)),
        onDeleteAllPart: () => dispatch(deleteAllPartDetail(vehicleId, detailId)),
        updatePartDetail: obj => dispatch(updatePartDetail({
            ...obj,
            vehicleId,
            detailId
        })),
        onSelectParts: data => dispatch(onSelectParts(data, vehicleId, detailId)),
        onSelectVehicles: data => dispatch(onSelectVehicleToDetails(data, detailId))
    };
};

export default connect(
    null,
    mapDispatchToProps
)(injectIntl(AddVehicle));

